<script setup lang="ts">

import { ref } from 'vue';

const count = ref(0);
var nonRefCount = 1;
function countUp() {
  count.value++;
  nonRefCount ++;
}

const objRef = ref({
  count:ref(0)
})
const arrayRef = ref([ref(2), ref(3)])
</script>

<template>
  <q-banner class="bg-amber">
    <p class="text-h3 text-center">陈一非 23211860123</p>
  </q-banner>
  <div>
    <q-banner>
      <q-btn class="btn-fixed-width" @click="count++">更新Ref</q-btn>
      <q-btn class="btn-fixed-width" @click="nonRefCount++">更新基本变量</q-btn>
      <q-btn class="btn-fixed-width" @click="countUp">countUp()</q-btn>
    </q-banner>
    <q-banner>
      <q-btn class="btn-fixed-width" @click="count.value++">Fail</q-btn>
      <q-btn class="btn-fixed-width" @click="objRef.count++">objRef</q-btn>
      <q-btn class="btn-fixed-width" @click="arrayRef[0].value++">arrayRef</q-btn>
    </q-banner>
    <q-card class="my-card">
      <q-card-section class="bg-blue text-white">
        <div class="info-row">
          <p class="p-lable">count的值:</p>
          <p class="p-value bg-white text-black text-center"> {{ count }}</p>
        </div>

        <div class="info-row">
          <p class="p-lable">nonRefCount的值:</p>
          <p class="p-value bg-white text-black text-center"> {{ nonRefCount }}</p>
        </div>

        <div class="info-row">
          <p class="p-lable">objRef的值:</p>
          <p class="p-value bg-white text-black text-center"> {{ objRef }}</p>
        </div>

        <div class="info-row">
          <p class="p-lable">arrayRef值:</p>
          <p class="p-value bg-white text-black text-center"> {{ arrayRef }}</p>
        </div>



      </q-card-section>
    </q-card>

  </div>
</template>

<style scoped>
.my-card
{
  width: 100%;
  max-width: 430px;
}
.btn-fixed-width{
  width: 130px;
}

.info-row{
  display: flex;
  flex-direction: row;
}
.p-lable{
  width: 150px;
  text-align: left;
}
.p-value{
  width: 200px;
}
</style>
